<script setup lang="ts">
  import { useForm } from '@/hooks/arco/useForm';
  import {
    createDrug,
    editDrug,
    deleteDrug,
  } from '@/api/medication-management/drug-information';
  import useDetailDrawerBinder from '@/hooks/arco/useDetailDrawerBinder';

  const editForm = useForm({
    state: {
      drugId: '',
      drugName: '',
      drugType: '',
      specifications: '',
      formTypeCode: '',
      routeTypeCode: '',
      frequencyTypeCode: '',
      dosageUnitCode: '',
      dosage: undefined as undefined | number,
      companyName: '',
      indication: '',
      createTime: '',
      saleUnitCode: '',
      convertRate: undefined as undefined | number,
      saleUnit: 1,
    },
    rules: {
      drugName: {
        required: true,
        message: '请输入药品名称',
      },
      drugType: {
        required: true,
        message: '请选择药品类型',
      },
      specifications: {
        required: true,
        message: '请输入药品规格',
      },
      formTypeCode: {
        required: true,
        message: '请选择药品剂型',
      },
      routeTypeCode: {
        required: true,
        message: '请选择药品用法',
      },
      frequencyTypeCode: {
        required: true,
        message: '请选择用药频次',
      },
      dosageUnitCode: {
        required: true,
        message: '请选择用药单位',
      },
      dosage: {
        required: true,
        message: '请输入单次用量',
      },
      companyName: {
        required: true,
        message: '请输入生产厂家',
      },
      indication: {
        required: true,
        message: '请输入功能主治',
      },
      saleUnitCode: {
        required: true,
        message: '请选择销售单位',
      },
      saleUnit: {
        required: true,
        message: '请输入销售单位',
      },
      convertRate: {
        required: true,
        message: '请输入用药单位',
      },
    },
  });

  const editModal = useDetailDrawerBinder({
    modalName: '药品',
    modes: ['detail', 'add', 'edit'],
    delete: true,
    deleteApi: () => deleteDrug(editForm.state.drugId),
    deleteText: '提示：长者药品入库时将无法查询到此药品，已入库的不受影响。',
    onShow(mode, otherParams) {
      if (mode === 'add') {
        editForm.backToInit();
      } else {
        editForm.setFieldsValue(otherParams);
      }
    },
    async onOkClick(mode) {
      await editForm.validate();
      const data = editForm.state;
      if (mode === 'add') {
        return createDrug(data);
      }
      return editDrug(data);
    },
  });

  defineExpose(editModal.expose);
</script>

<template>
  <detail-drawer v-bind="editModal.bindProps">
    <a-form
      v-bind="editForm.bindProps"
      layout="vertical"
      :disabled="editModal.isShow('detail')"
    >
      <a-row>
        <a-col :span="24">
          <a-form-item field="drugName" label="药品名称">
            <a-input
              v-model="editForm.state.drugName"
              placeholder="请输入药品名称"
              allow-clear
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="specifications" label="药品规格">
            <a-input
              v-model="editForm.state.specifications"
              placeholder="请输入药品规格"
              allow-clear
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="drugType" label="药品类型">
            <dict-select
              v-model="editForm.state.drugType"
              type="DrugType"
              placeholder="请选择药品类型"
              allow-clear
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="formTypeCode" label="药品剂型">
            <dict-select
              v-model="editForm.state.formTypeCode"
              type="DrugFormType"
              placeholder="请选择药品剂型"
              allow-clear
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="routeTypeCode" label="药品用法">
            <dict-select
              v-model="editForm.state.routeTypeCode"
              type="DrugRouteType"
              placeholder="请选择药品用法"
              allow-clear
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="frequencyTypeCode" label="用药频次">
            <dict-select
              v-model="editForm.state.frequencyTypeCode"
              type="DrugFrequencyType"
              placeholder="请选择用药频次"
              allow-clear
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="dosageUnitCode" label="用药单位">
            <dict-select
              v-model="editForm.state.dosageUnitCode"
              type="DrugTakeUnit"
              placeholder="请选择用药单位"
              allow-clear
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="dosage" label="单次用量">
            <a-input-number
              v-model="editForm.state.dosage"
              placeholder="请输入单次用量"
              :precision="1"
              allow-clear
            >
              <template #append>
                <span v-if="!editForm.state.dosageUnitCode">/</span>
                <dict-tag
                  v-else
                  type="DrugTakeUnit"
                  :value="editForm.state.dosageUnitCode"
                />
              </template>
            </a-input-number>
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="companyName" label="生产厂家">
            <a-input
              v-model="editForm.state.companyName"
              placeholder="请输入生产厂家"
              allow-clear
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="saleUnitCode" label="销售单位">
            <dict-select
              v-model="editForm.state.saleUnitCode"
              type="DrugSaleUnit"
              placeholder="请选择销售单位"
              allow-clear
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="convertRate" label="销售单位与用药单位转换比">
            <a-row :gutter="8">
              <a-col :span="12">
                <a-form-item field="saleUnit" no-style>
                  <a-input-number
                    v-model="editForm.state.saleUnit"
                    placeholder="请输入销售单位"
                    readonly
                  >
                    <template #append>
                      <span v-if="!editForm.state.saleUnitCode">/</span>
                      <dict-tag
                        v-else
                        type="DrugSaleUnit"
                        :value="editForm.state.saleUnitCode"
                      />
                    </template>
                  </a-input-number>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="convertRate" no-style>
                  <a-input-number
                    v-model="editForm.state.convertRate"
                    placeholder="请输入用药单位"
                  >
                    <template #append>
                      <span v-if="!editForm.state.dosageUnitCode">/</span>
                      <dict-tag
                        v-else
                        type="DrugTakeUnit"
                        :value="editForm.state.dosageUnitCode"
                      />
                    </template>
                  </a-input-number>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="indication" label="功能主治">
            <a-input
              v-model="editForm.state.indication"
              placeholder="请输入功能主治"
              allow-clear
            />
          </a-form-item>
        </a-col>

        <a-col v-if="editModal.modeIs('detail')" :span="24">
          <a-form-item field="createTime" label="创建时间">
            <a-input v-model="editForm.state.createTime" readonly />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </detail-drawer>
</template>

<style lang="less" scoped></style>
